<template>
  <div class="editWrapper">
    <!-- 插入页面头部信息： -->
    <TopNav title="编辑资料" />
    <!-- 个人头像div -->
    <div class="userpic">
      <!-- 第二种添加图片上传组件的方法：添加卡槽，将图片放进卡槽里面 -->
      <van-uploader :after-read="afterRead">
        <img
          v-if="userInfo.head_img"
          :src="$axios.defaults.baseURL + userInfo.head_img"
          alt=""
        />
        <img v-else src="../../assets/logo1.jpg" alt="" />
        <!-- 第一种方法：在img后面添加插件，然后修改定位与透明度 -->
        <!-- <van-uploader :after-read="afterRead" /> -->
      </van-uploader>
    </div>
    <!-- 插入组件： -->
    <ProfileBar
      event="昵称"
      :details="userInfo.nickname"
      @click.native="isShowNickname = true"
    />
    <ProfileBar
      event="密码"
      details="******"
      @click.native="isShowPassword = true"
    />
    <ProfileBar
      event="性别"
      :details="userInfo.gender == '1' ? '小哥哥' : '小姐姐'"
      @click.native="isShowGender = true"
    />
    <!-- 显示修改昵称的弹窗： -->
    <van-dialog
      @confirm="setNewnick"
      v-model="isShowNickname"
      title="知了？？"
      show-cancel-button
    >
      <van-field v-model="newNickname" placeholder="请输入新昵称,晓得不？" />
    </van-dialog>

    <!-- 显示修改密码的弹窗： -->
    <van-dialog
      @confirm="setPassword"
      v-model="isShowPassword"
      title="修改密码？？"
      show-cancel-button
    >
      <van-field
        type="password"
        v-model="newPassword"
        placeholder="请输入新密码~~"
      />
    </van-dialog>
    <!-- 添加选性别的选项： -->
    <!-- 被选中的时候触发大函数：  @select="onSelect" -->
    <van-action-sheet
      v-model="isShowGender"
      :actions="genderList"
      @select="onSelect"
      cancel-text="人家不想选了啦"
    />
    <!-- after-read是选中图片后的回调函数  可以接收图片数据对象-->
    <!-- <van-uploader :after-read="afterRead" /> -->
  </div>
</template>

<script>
// 引入头部信息模板：
import TopNav from "../../components/TopNav";
import ProfileBar from "../../components/ProfileBar";
export default {
  components: {
    TopNav,
    ProfileBar,
  },
  data() {
    return {
      userInfo: {},
      newNickname: "",
      newPassword: "",
      isShowNickname: false,
      isShowPassword: false,
      // 默认不显示
      isShowGender: false,
      // actions是动作面板的选项数组；其中的每一个对象都是genderList可选动作
      genderList: [
        { name: "男", gender: 1 },
        { name: "女", gender: 0 },
      ],
    };
  },
  created() {
    this.loadPage();
  },
  methods: {
    loadPage() {
      this.$axios({
        url: "/user/" + localStorage.getItem("userId"),
      })
        .then((res) => {
          console.log(res.data);
          const { message, data } = res.data;
          if (message == "获取成功") {
            this.userInfo = data;
          }
        })
        .catch((err) => {});
    },
    setNewnick() {
      console.log("弹出了输入框");
      console.log(this.newNickname);
      const data = {
        nickname: this.newNickname,
      };
      this.editUserInfo(data);
      this.newNickname = "";
    },
    setPassword() {
      console.log("弹出修改密码的弹窗");
      console.log(this.newPassword);
      const data = {
        password: this.newPassword,
      };
      // editUserInfo(data);  一定要加 this！！！
      this.editUserInfo(data);
      this.newPassword = "";
    },
    editUserInfo(data) {
      this.$axios({
        method: "post",
        url: "/user_update/" + localStorage.getItem("userId"),
        data,
      })
        .then((res) => {
          console.log(res.data);
          this.loadPage();
        })
        .catch((err) => {});
    },
    onSelect(action) {
      console.log("挑了一个选项");
      console.log(action.gender);
      // const data = action.gender;   //错误！！
      const data = {
        gender: action.gender,
      };
      this.editUserInfo(data);
      // 点击完选项后，关闭弹窗
      this.isShowGender = false;
    },
    afterRead(fileObj) {
      console.log("可以拿到什么？");
      console.log(fileObj);
      // 我们需要传递出去的是file属性，里面放的是图片文件
      // 要上传二进制的资源，需要上传formData：
      // 首先：1、要创建一个空的formData对象：
      const fd = new FormData();
      // 2、用append函数，将文件加载进去：  key，真正的图片
      fd.append("file", fileObj.file);
      // 真正发送请求：
      this.$axios({
        method: "post",
        url: "/upload",
        data: fd,
      })
        .then((res) => {
          console.log(res.data);
          const { message, data } = res.data;
          if (message == "文件上传成功") {
            // /当文件上传成功，就拿到data。里面url的地址
            console.log(data.url);
            const newData = {
              head_img: data.url,
            };
            this.editUserInfo(newData);
          }
        })
        .catch((err) => {});
    },
  },
};
</script>

<style lang="less" scoped>
.userpic {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 147 / 360 * 100vw;
  // 可以给 img后面的图片上传组件修改样式
  // .van-uploader {
  //   position: absolute;
  //   opacity: 0;
  // }
  img {
    width: 70 / 360 * 100vw;
    height: 70 / 360 * 100vw;
    border-radius: 50%;
    object-fit: cover;
  }
}
</style>